<template>
  <div class="plan">
    <div class="title">
      第{{week}}周  {{startDate}} - {{endDate}}
    </div>

    <div class="weeks">
      <div class="white-block week" @click="toDetail(item)" :class="{done:item.have}" v-for="(item) in weeks" :key="item.index">
        <span class="week-date">{{item.date}}</span>
        <span class="week-name">{{item.name}}</span>
        <div class="radios" v-if="!item.have">
          <input @click="toAdd(item)" type="radio" :checked="item.have"  :name ="item.week" value="true">
          有
          <input type="radio" disabled="!item.have" class="false" :checked="!item.have"  :name ="item.week" value="false">
          无
        </div>
        <div class="num" v-if="item.have">
          {{item.done}}/{{item.num}}
        </div>

        <div class="score" v-if="item.have&&new Date().toLocaleDateString()>item.date">
          {{item.score}} 分
        </div>

        <div class=""  v-if="item.have">
         已创建
        </div>

<!--        <span class="week-status" @click="add(item)" v-if="!item.status">无</span>-->
<!--        <span class="week-status" v-else >有</span>-->
      </div>
    </div>
<!--    <div class="btns">-->
<!--      <div class="left-btn btn">-->
<!--        修改任务-->
<!--      </div>-->
<!--      <div class="right-btn btn">-->
<!--        历史查询-->
<!--      </div>-->
<!--    </div>-->
  </div>
</template>

<script>
import { list, delAll } from '@/api/todo'
import { showAlert, showConfirm } from '@/dialog'
import { parseTime, str2Date } from '@/util/time'
export default {
  created () {
    this.startDate = this.$route.query.startDate
    this.endDate = this.$route.query.endDate
    this.week = this.$route.query.week
    this.planId = this.$route.query.planId
    this.getTodos()
  },
  methods: {
    getTodos () {
      list(this.planId).then(res => {
        this.todos = res.data
      })
    },
    del (item) {
      showConfirm('确定删除吗?').then(res => {
        if (!res) return
        delAll(parseTime(item.date)).then(res => {
          showAlert('操作成功').then(res => {
            this.getTodos()
          })
        })
      })
    },
    getWeekName (date) {
      const names = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
      if (date.toLocaleDateString() == new Date().toLocaleDateString()) {
        return '今天'
      }
      return names[date.getDay()]
    },
    toDetail (item) {
      if (item.have) {
        this.toAdd(item)
      }
    },
    toAdd (item) {
      this.$router.push({
        path: '/todo/type',
        query: {
          date: item.date,
          name: item.name,
          planId: this.planId
        }
      })
    },
    initWeeks () {
      const weeks = []
      for (let i = new Date(this.startDate).valueOf(); i <= new Date(this.endDate).valueOf(); i += 86400000) {
        weeks.push({
          name: this.getWeekName(new Date(i)),
          have: false,
          date: new Date(i).toLocaleDateString(),
          num: 0,
          done: 0,
          score: 0
        })
      }
      return weeks
    }
  },
  computed: {
    weeks () {
      const weeks = this.initWeeks()
      weeks.forEach(week => {
        week.num = 0
        week.have = false
        this.todos.forEach(todo => {
          // 筛选时间
          if (str2Date(todo.date).toLocaleDateString() === week.date) {
            week.have = true
            week.num++
            if (todo.status == 1 || todo.status == 2) {
              week.done++
            }
            if (todo.status === 2) {
              week.score += parseFloat(todo.score)
            }
          }
        })
      })
      return weeks
    }
  },
  data () {
    return {
      todos: [],
      startDate: null,
      endDate: null,
      week: null,
      planId: null
    }
  }
}
</script>

<style scoped lang="stylus">
.plan
  padding 10px 10px
  .title
    width 100%
    height 60px
    color #55545D
    font-size 22px
    display flex
    justify-content center
    align-items center
    box-shadow: 0px 3px 7px 0px rgba(89, 88, 87, 0.52);

  .time-filter
    padding 0 10px
    font-size 18px
    color #55545D
    display flex
    justify-content space-between
    align-items center
    margin-top 20px
    .place
      font-size 16px
      color red
  .weeks
    margin-top 20px
    padding-bottom 40px
    .week
      margin-bottom 10px
      display flex
      align-items center
      justify-content space-between
      padding 0 10px
      font-size 14px
      background-color #ECEAEA
      color #55545D
      .del
        color red
      .radios
        display flex
        align-items center
        input
          margin-right 10px
        .false
          margin-left 20px
      &.done
       background-color white
      .week-date
        color #595857
  .btns
    font-size 18px
    color #55545D
    display flex
    justify-content space-between
    position fixed
    bottom 10px
    left 0
    right 0
    padding 0 10px
    .btn
      background-color white
      border 1px 1px 1px 1px solid #595857
      box-shadow: 0px 3px 7px 0px rgba(89, 88, 87, 0.52);
      width 100px
      height 40px
      display flex
      justify-content center
      align-items center
</style>
